@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$slider: () !default;
$slider: map.merge(
  (
    track-bg-color: get-css-var('fill-color-humble'),
    track-bg-color-hover: get-css-var('fill-color-hover'),
    track-bg-color-disabled: get-css-var('slider-track-bg-color'),
    track-height: 4px,
    filler-bg-color: get-css-var('color-primary-opacity-2'),
    filler-bg-color-hover: get-css-var('color-primary-base'),
    filler-bg-color-disabled: get-css-var('fill-color-disabled'),
    handler-size: 16px,
    handler-bg-color: get-css-var('color-white'),
    handler-b-width: 2px,
    handler-b-color: get-css-var('color-primary-base'),
    handler-b-color-disabled: get-css-var('fill-color-disabled'),
    handler-s-color: get-css-var('color-primary-light-6'),
    handler-shadow: unset,
    handler-shadow-hover: unset,
    handler-shadow-focus: 0 0 4px 1px get-css-var('slider-handler-s-color'),
    handler-shadow-disabled: unset,
    handler-scale-hover: 1.25,
    handler-scale-focus: 1.25,
    marker-size: 8px,
    marker-pad: 32px
  ),
  $slider
);

.#{$namespace}-slider {
  &-vars {
    @include define-preset-values('slider', $slider);
  }

  @mixin define-slider-style($style-map) {
    @include define-preset-style('slider', $style-map);
  }

  @include basis;

  $padding: max(
    0px,
    calc((get-css-var('slider-handler-size') - get-css-var('slider-track-height')) * 0.5)
  );
  $margin: calc(get-css-var('slider-handler-size') * 0.5 + 1px);

  display: flex;
  width: 100%;
  cursor: pointer;

  &--vertical {
    display: inline-flex;
    width: auto;
    height: 100%;
  }

  &--with-marker {
    margin-bottom: get-css-var('slider-marker-pad');
  }

  &--flip-marker {
    margin-top: get-css-var('slider-marker-pad');
    margin-bottom: 0;
  }

  &--vertical#{&}--with-marker {
    margin-inline-end: get-css-var('slider-marker-pad');
    margin-bottom: 0;
  }

  &--vertical#{&}--flip-marker {
    margin-inline: get-css-var('slider-marker-pad') 0;
    margin-top: 0;
    margin-bottom: 0;
  }

  &--loading {
    cursor: auto;
  }

  &--disabled {
    cursor: not-allowed;
  }

  &__container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(100% - get-css-var('slider-handler-size') - 2px);
    padding: $padding 0;
    margin: 0 $margin;
    cursor: pointer;
  }

  &--vertical &__container {
    flex-direction: row;
    width: auto;
    height: calc(100% - get-css-var('slider-handler-size') - 2px);
    padding: 0 $padding;
    margin: $margin 0;
  }

  &--disabled &__container {
    cursor: not-allowed;
  }

  &__track {
    display: flex;
    align-items: flex-start;
    width: 100%;
    height: get-css-var('slider-track-height');
    overflow: hidden;
    background-color: get-css-var('slider-track-bg-color');
    border-radius: get-css-var('slider-track-height');
    transition: get-css-var('transition-background');
  }

  &:hover &__track,
  &--sliding &__track {
    background-color: get-css-var('slider-track-bg-color-hover');
  }

  &--vertical &__track {
    width: get-css-var('slider-track-height');
    height: 100%;
  }

  &--reverse &__track {
    align-items: flex-end;
    justify-content: flex-end;
  }

  &--disabled &__track,
  &--disabled:hover &__track,
  &--disabled#{&}--sliding &__track {
    background-color: get-css-var('slider-track-bg-color-disabled');
  }

  &__filler {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: get-css-var('slider-track-height');

    &::after {
      position: absolute;
      inset: 0;
      content: '';
      background-color: get-css-var('slider-filler-bg-color');
      border-radius: get-css-var('slider-track-height');
      transition: get-css-var('transition-background');
      transform: get-css-var('slider-filler-after-transform');
    }
  }

  &:hover &__filler,
  &--sliding &__filler {
    &::after {
      background-color: get-css-var('slider-filler-bg-color-hover');
    }
  }

  &--disabled &__filler,
  &--disabled:hover &__filler,
  &--disabled#{&}--sliding &__filler {
    &::after {
      background-color: get-css-var('slider-filler-bg-color-disabled');
    }
  }

  $handler-size: get-css-var('slider-handler-size');

  &__trigger {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: $handler-size;
    height: $handler-size;
    transition: get-css-var('transition-opacity');

    .#{$namespace}-tooltip {
      line-height: 1;
      cursor: pointer;
      user-select: none;

      &,
      &__trigger {
        width: 100%;
        height: 100%;
      }
    }
  }

  &--hide-trigger &__trigger {
    opacity: 0%;
  }

  &__handler {
    @include round-border(get-css-var('slider-handler-b-color'));

    width: $handler-size;
    height: $handler-size;
    cursor: pointer;
    background-color: get-css-var('slider-handler-bg-color');
    border: get-css-var('slider-handler-b-width') solid get-css-var('slider-handler-b-color');
    border-radius: $handler-size;
    outline: 0;
    box-shadow: get-css-var('slider-handler-shadow');
    transition: get-css-var('transition-border'), get-css-var('transition-shadow'),
      get-css-var('transition-transform');

    &::before {
      inset-inline-start: 2px;
      top: 2px;
      width: calc(100% - 4px);
      height: calc(100% - 4px);
      opacity: 0%;
    }
  }

  &--hide-trigger &__handler {
    transform: scale(0);
  }

  $handler: #{&}__handler;

  &__button {
    display: flex;
    align-items: center;
    justify-content: center;
    outline: 0;
    transition: get-css-var('transition-transform');

    &:hover {
      transform: scale(get-css-var('slider-handler-scale-hover'));

      #{$handler} {
        box-shadow: get-css-var('slider-handler-shadow-hover');
      }
    }

    &:focus,
    &--sliding {
      transform: scale(get-css-var('slider-handler-scale-focus'));

      #{$handler} {
        box-shadow: get-css-var('slider-handler-shadow-focus');
      }
    }

    &--loading #{$handler}::before {
      opacity: 100%;
    }
  }

  &--disabled &__button {
    #{$handler} {
      cursor: not-allowed;
      border-color: get-css-var('slider-handler-b-color-disabled');
    }

    &,
    &:hover {
      transform: scale(1);

      #{$handler} {
        box-shadow: get-css-var('slider-handler-shadow-disabled');
      }
    }
  }

  &--disabled#{&}--sliding &__button &__handler {
    box-shadow: get-css-var('slider-handler-shadow-disabled');
  }

  &__tip {
    min-width: auto;
    min-height: auto;
    user-select: none;
  }

  $marker-size: get-css-var('slider-marker-size');

  &__point {
    position: absolute;
    display: flex;
    pointer-events: none;
  }

  &__dot {
    width: $marker-size;
    height: $marker-size;
    background-color: get-css-var('slider-handler-bg-color');
    border: get-css-var('slider-handler-b-width') solid
      get-css-var('slider-handler-b-color-disabled');
    border-radius: $marker-size;
    transition: get-css-var('transition-border');
  }

  &__point--in-range &__dot {
    border-color: get-css-var('slider-handler-b-color');
  }

  &--disabled &__point &__dot {
    border-color: get-css-var('slider-handler-b-color-disabled');
  }

  $markers-pos: calc(get-css-var('slider-handler-size') + 6px);

  &__markers {
    position: absolute;
    top: $markers-pos;
    width: 100%;
  }

  &--flip-marker &__markers {
    top: auto;
    bottom: $markers-pos;
  }

  &--vertical &__markers {
    inset-inline-start: $markers-pos;
    top: auto;
    width: auto;
    height: 100%;
  }

  &--vertical#{&}--flip-marker &__markers {
    inset-inline: auto $markers-pos;
    bottom: auto;
  }

  &__marker {
    position: absolute;
    user-select: none;
  }

  &--flip-marker &__marker {
    bottom: 0;
  }

  &--vertical#{&}--flip-marker &__marker {
    right: 0;
    bottom: auto;
  }

  $states: success, error, warning;

  @each $state in $states {
    &--#{$state} {
      @include define-slider-style(
        (
          filler-bg-color: 'color' $state 'opacity-2',
          filler-bg-color-hover: 'color' $state 'base',
          handler-b-color: 'color' $state 'base',
          handler-s-color: 'color' $state 'light-6'
        )
      );
    }
  }
}
